﻿@page "/components/radio"
@page "/components/MudRadio"
@page "/components/MudRadio`1"
@page "/components/MudRadioGroup"
@page "/components/MudRadioGroup`1"

<DocsPage>
    <DocsPageHeader Title="Radio" SubTitle="Radio buttons allow the user to select a single choice from a group of options." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="RadioGroup">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioGroupExample)" ShowCode="false">
                <RadioGroupExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioGroupColorExample)" ShowCode="false">
                <RadioGroupColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dense">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioDenseExample)">
                <RadioDenseExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioSizeExample)">
                <RadioSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Content Placement">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioContentPlacementExample)" ShowCode="false">
                <RadioContentPlacementExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="ReadOnly and Disabled mode">
                <Description>
                    <MudText>All child <CodeInline>MudRadio</CodeInline> components can be <CodeInline>Disabled</CodeInline> or set as <CodeInline>ReadOnly</CodeInline> from the parent <CodeInline>MudRadioGroup</CodeInline>.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioReadOnlyDisabledExample)">
                <RadioReadOnlyDisabledExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Keyboard Navigation">
                <Description>
                    <MudText>MudRadio accepts keys to keyboard navigation.</MudText>
                    <br />
                    <MudText><CodeInline>Tab</CodeInline> or <CodeInline>Shift+Tab</CodeInline> key to focus next/previous radio</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> or <CodeInline>Space</CodeInline> keys to select focused radio</MudText>
                    <MudText><CodeInline>Backspace</CodeInline> key to reset radio</MudText>
                    <MudText>*Disabled radios cannot be changed by keys.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioKeyboardNavigationExample)" ShowCode="false">
                <RadioKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
